/**
 * 首页直间工人力弹框组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useEmployeeStore } from '@/stores/home'
import http from '@/axios/http'

const employeeStore = useEmployeeStore()

const year = ref('')
const month = ref('')
const factory = ref('')
const yearList = ref([])
const monthList = ref([])
const factoryList = ref([])
const tableData = ref([])

watch([year, month, factory], () => {
  getEmployeeDetail()
})

function getEmployeeOther() {
  http.post("/home/getEmployeeOther")
  .then(res => {
    yearList.value = res.data.yearList
    monthList.value = res.data.monthList
    factoryList.value = res.data.factoryList
    factoryList.value.unshift("全厂")
  }).catch(err => {
    console.log(err)
  })
}

function getEmployeeDetail() {
  http.post("/home/getEmployeeDetail", {
    year: year.value,
    month: month.value,
    factory: factory.value
  }).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function beforeOpen() {
  year.value = (new Date()).getFullYear() + ""
  month.value = ((new Date()).getMonth() < 9 ? ("0" + ((new Date()).getMonth() + 1)) : ((new Date()).getMonth() + 1)) + ""
  factory.value = "全厂"

  if (tableData.value.length === 0) {
    getEmployeeDetail()
  }
}

function afterClose() {
  tableData.value = []
}

onMounted(() => {
  getEmployeeOther()
  getEmployeeDetail()
})
</script>

<template>
  <div id="home-employee-popup">
    <el-dialog
      v-model="employeeStore.isShow"
      title="直间工人力"
      top="5vh"
      width="80vw"
      center
      @open="beforeOpen"
      @closed="afterClose"
    >
      <div class="employee-option">
        <div class="employee-option-item">
          <span>年份：</span>

          <el-select
            v-model="year"
            size="large"
            :teleported="false"
            placeholder="请选择年份"
          >
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        
        <div class="employee-option-item">
          <span>月份：</span>

          <el-select
            v-model="month"
            size="large"
            :teleported="false"
            placeholder="请选择月份"
          >
            <el-option
              v-for="item in monthList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>

        <div class="employee-option-item">
          <span>工厂：</span>

          <el-select
            v-model="factory"
            size="large"
            :teleported="false"
            placeholder="请选择工厂"
          >
            <el-option
              v-for="item in factoryList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>

      <el-table
        :data="tableData"
        empty-text="暂无数据"
        size="large"
        maxHeight="72vh"
        border
      >
        <el-table-column label="工厂" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.fact_no !== null ? scope.row.fact_no : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="子工厂" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.sub_fact !== null ? (scope.row.sub_fact == 'TOTAL' ? '全厂' : scope.row.sub_fact) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="职员间工" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.lab_a !== null ? scope.row.lab_a : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="作业员间工" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.lab_b !== null ? scope.row.lab_b : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="间工合计" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_lab !== null ? scope.row.tot_lab : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="直工人数" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.dir_per !== null ? scope.row.dir_per : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="总人数" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_per !== null ? scope.row.tot_per : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="间直比" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ld_rate !== null ? scope.row.ld_rate : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#home-employee-popup {
  --el-color-primary: green;
  --el-bg-color: black;
  --el-text-color-secondary: white;

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .employee-option {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1%;
    color: white;
    font-size: 2vh;
    font-weight: normal;

    .employee-option-item {
      &:deep(.el-input__wrapper) {
        background-color: black;
      }

      &:deep(.el-input__inner) {
        color: #ccc;
      }

      &:deep(.el-select__popper.el-popper) {
        background-color: black;
      }

      &:deep(.el-select-dropdown__item) {
        color: white;
        background-color: black;
      }

      &:deep(.el-select-dropdown__item.selected) {
        color: white;
        background-color: green;
      }

      &:deep(.el-select-dropdown__item.hover) {
        color: white;
        background-color: #666;
      }
    }
  }

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-border-color: rgb(100, 100, 100);
    --el-table-row-hover-bg-color: rgb(50, 50, 50);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &:deep(.el-table--large .cell) {
    padding: 0 5px;
  }
}
</style>